<!-- Content Header (Page header) -->
<section class="content-header">
	<h1>Zookeeper信息</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i>Zookeeper信息</a></li>
		<li><a href="#"></i>Zookeeper信息</a></li>
	</ol>
</section>
<!-- Main content -->
<section id="container" class="content">
	<div class="row">
		<div class="col-md-12">
			<div class="box box-primary">


				<div class="form-group" id="hostDetailtable">
				<table class="table table-bordered text-center">
				<tbody>
				  <tr>
				  <td><button class="btn btn-block btn-primary" onclick="showTable('blockSQLs')">blockSQLs</button></td>
				  <td><button class="btn btn-block btn-primary" onclick="showTable('user')">user</button></td>
				  <td><button class="btn btn-block btn-primary" onclick="showTable('rule')">rule</button></td>
				  <td><button class="btn btn-block btn-primary" onclick="showTable('sequence')">sequence</button></td>
				  <td><button class="btn btn-block btn-primary" onclick="showTable('schema/TESTDB')">schema</button></td>
				  <td><button class="btn btn-block btn-primary" onclick="showTable('datanode')">datanode</button></td>
				  <td><button class="btn btn-block btn-primary" onclick="showTable('datahost')">datahost</button></td>     
				  </tr></tbody></table></div>
					<div class="box-header">
				 <form action="" id="query_Form">
					<select onchange="datasouce_change()" name="ds" id="datasource" class="form-control" style="width: 200px;">
		                  	<option value="">请选择子路径</option>
		            </select>
		         </form>
				</div>			
				<div class="box-body">
					<div>
						<table id="table"></table>
						<div style="text-align: right;">
							<div id="paginator"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</section>
<!-- /.content -->


<script type="text/javascript">
   $.AdminLTE.boxWidget.activate();
</script>

<script type="text/javascript">
var zkconfig="";
function queryForm2(form_id,extra_call){ 
	var datas =serializeObject($('#'+form_id));
	if(extra_call){
		  var extra_func = getFunc(extra_call);
		  if(extra_func)
			  extra_func(datas);
	}
	loadData();
	/*
	createMmgrid($('#datasource').val());
	if(mmgrid){
		mmgrid.load(datas);
	}else{
		$('#table').load(datas);
	}
	*/
}

var datasouce_change = function(){
	queryForm2('query_Form');
}
var showTable = function(url) {
	//$('#contentGraph').attr('src', url);
	zkconfig=url;
	if (url=="datanode"){
		$('#datasource').empty();
		$('#datasource').append("<option value=\"\">请选择子路径</option>");		
		loadData();	
	}
	else {
	  initDataSouce(url);
	}
	
}
var Selected_Callback = function(target_select){
	  this.onSuccess=function(data){
			try {
				var j_obj = data;
				if (j_obj.success) {
					var length = j_obj.rows.length;
					$("#"+target_select).empty();
					$("#"+target_select).append("<option value=\"\">请选择子路径</option>");
					for(var i=0;i<length;i++){
						var mycatName = j_obj.rows[i].child;						
						$("#"+target_select).append("<option value=\""+ mycatName+"\">"+ mycatName+"</option>");
					}
				}
			} catch (e) {
				alert("异常!")
			}
		};
		this.onFail = function(jqXHR, textStatus, errorThrown){
		};
};

var initDataSouce = function(url){
	//alert(zkPath)
	//alert(zkId)
	var rainbow = new Rainbow();
	rainbow.setService("zkConfigService");
	rainbow.setMethod("query");
	rainbow.setParam("zkpath", zkPath); 
	rainbow.setParam("zkid", zkId);
	rainbow.setParam("config", url);
	rainbowAjax.query(rainbow, new Selected_Callback("datasource"));
};

function createMmgrid(key){
	alert(key);
	/*
	 if( key=="system") {
	   cols = [
					{ title:'name', name:'name' ,width:500, align:'left'},
			        { title:'data', name:'data' ,width:500, align:'left'}
			        
			    ];
     } 
	 if( key=="user") {
		   cols = [
						{ title:'name', name:'name' ,width:500, align:'left'},
				        { title:'password', name:'password' ,width:500, align:'left'},
						{ title:'readOnly', name:'readOnly' ,width:500, align:'left'}
				        
				    ];
	      } 	
	 $('#table').remove();
	 //$('#table').mmGrid.cols= [];
	// $('#table').mmGrid.cols=cols;
	  mmgrid = $('#table').mmGrid({
	        indexCol: true,
	        height: '400',
	        indexColWidth: 35,
	        cols: cols,
	        url: './dispatcherAction/queryByMMGrid.do?service=zkConfigService&method=queryChilds&zkpath='+zkPath + '&zkid=' + zkId+ '&config=' + zkconfig,
	        method: 'post',
	        root: 'items'
	    });		
	  */
	$('#table').mmGrid.url='./dispatcherAction/queryByMMGrid.do?service=zkConfigService&method=queryChilds&zkpath='+zkPath + '&zkid=' + zkId+ '&config=' + zkconfig;
	alert($('#table').mmGrid.url);
}
function loadData(){
	var rainbow = new Rainbow();
	rainbow.setService("zkConfigService");
	rainbow.setMethod("queryChilds");
	rainbow.setParam("zkpath", zkPath);
	rainbow.setParam("zkid", zkId);
	rainbow.setParam("config", zkconfig);
	rainbow.setParam("ds", $('#datasource').val());
	rainbowAjax.query(rainbow, new function(){
		this.onSuccess = function(data) {
			 try {
				
				if (data.success) {
					//var dataRow = data.rows[0];
					//initMap(dataRow);
					mmgrid.load(data.rows);
				}
			} catch (e) {
				alert(e);
			} 
		};
		this.onFail = function(jqXHR, textStatus, errorThrown) {
		};
	});
	
}
function createMmgrids(){
	   cols = [
					{ title:'名称', name:'name' ,width:200, align:'left'},
			        { title:'参数', name:'param' ,width:200, align:'left'},
			        { title:'数值', name:'value' ,width:300, align:'left'},
			        { title:'描述', name:'des' ,width:500, align:'left'}
			        
			    ];
	  mmgrid = $('#table').mmGrid({
	        indexCol: true,
	        height: '400',
	        indexColWidth: 35,
	        cols: cols,
	        autoLoad: false,
	        method: 'post',
	        root: 'items'
	    });	
}
$(document).ready(function() {
	createMmgrids();

});
  
</script>
